<template>
  <div class="app-container">
    <el-row :gutter="0">
      <!--专病数据-->
      <el-form
        class="formBox formBox1"
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <!-- <el-form-item label="医院" prop="hospital" clearable>
          <department
            :isHospital="true"
            :isdepat="true"
            @refreshData="refreshData"
            deptWidth="160px"
            :isUserAll="true"
            ref="department"
          >
          </department>
        </el-form-item> -->
        <!-- <el-form-item label="标注设置名称" prop="markName">
          <el-input
            v-model="queryParams.markName"
            placeholder="请输入标注设置名称"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleQuery"
            @change="handleQuery"
          />
        </el-form-item> -->
        <el-form-item label="专病名称" prop="diseaseIds">
          <el-select
            v-model="queryParams.diseaseIds"
            placeholder="专病名称"
            clearable
            filterable
            style="width: 180px"
            @change="handleQuery"
          >
            <el-option
              v-for="dict in sysManageDiseases"
              :key="dict.diseaseClassifyId"
              :label="dict.diseaseClassifyName"
              :value="dict.diseaseClassifyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="特征名称" prop="detectionName">
          <el-input
            v-model="queryParams.featureName"
            placeholder="请输入特征名称"
            clearable
            style="width: 180px"
            @keyup.enter.native="handleQuery"
            @change="handleQuery"
          />
        </el-form-item>

        <!-- <el-form-item label="状态" prop="status" clearable>
                    <el-select v-model="queryParams.status" placeholder="状态" clearable style="width: 160px">
                        <el-option v-for="dict in sysUseTypeArr" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item> -->
        <!-- <el-form-item label="创建人" prop="createBy">
                    <el-input v-model="queryParams.createBy" placeholder="请输入创建人名称" clearable style="width:180px"
                        @keyup.enter.native="handleQuery" />
                </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <!-- <el-button icon="el-icon-printer" size="mini" @click="resetQuery">打印</el-button> -->
        </el-form-item>
      </el-form>
      <div class="formBox">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['tagManage:tagSetting:add']"
              >新增</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>
        <el-table border v-loading="loading" :data="classifyList">
          <!--                <el-table-column type="selection" width="50" align="center" />-->
          <!-- <el-table-column sortable label="序号" align="center" type="index" width="50">
                        <template slot-scope="scope">
                            <span>{{ getIndex(scope.$index) }}</span>
                        </template>
                    </el-table-column> -->
          <el-table-column
            sortable
            label="ID"
            align="center"
            width="80"
            prop="id"
          >
          </el-table-column>
          <!-- <el-table-column
            sortable
            label="标注设置名称"
            align="center"
            prop="markName"
            :show-overflow-tooltip="true"
            width="160"
          >
          </el-table-column> -->
          <el-table-column
            sortable
            label="专病名称"
            align="center"
            prop="diseaseNames"
            :show-overflow-tooltip="true"
            width="160"
          >
          </el-table-column>
          <el-table-column
            sortable
            label="特征名称"
            align="center"
            prop="featureName"
            :show-overflow-tooltip="true"
            width="160"
          >
          </el-table-column>
          <el-table-column
            sortable
            label="标注颜色值"
            align="center"
            prop="colour"
            width="160"
          >
            <template slot-scope="scope">
              <p
                :style="{ background: scope.row.colour }"
                style="width: 20px; height: 20px; margin: 0 auto"
              ></p>
              <span>{{ scope.row.colour }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建人"
            align="center"
            prop="createBy"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            sortable
            label="创建时间"
            align="center"
            prop="createTime"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column  label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> -->
          <el-table-column
            label="操作"
            align="center"
            fixed="right"
            width="140"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['tagManage:tagSetting:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['tagManage:tagSetting:remove']"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-row>

    <!-- 添加或修改对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :before-close="cancel"
      :close-on-click-modal="false"
      v-dialogDrag
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="left"
        class="formBox1"
      >
        <!-- <el-row>
          <el-col :span="24">
            <el-form-item label="标注设置名称" prop="markName">
              <el-input
                v-model="form.markName"
                placeholder="请输入标注设置名称"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        <el-row>
          <el-col :span="24">
            <!-- form.diseaseIds -->
            <el-form-item label="适用专病" prop="diseaseIds">
              <el-select
                v-model="form.diseaseIds"
                placeholder="适用专病"
                clearable
                filterable
                style="width: 100%"
              >
                <el-option
                  v-for="dict in sysManageDiseases"
                  :key="dict.diseaseClassifyId"
                  :label="dict.diseaseClassifyName"
                  :value="dict.diseaseClassifyId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-for="(dict, index) in colorArr" :key="index">
          <el-col :span="7">
            <el-form-item :label="'特征名称' + getIndex(index)">
              <el-input
                v-model="dict.featureName"
                placeholder="请输入特征名称"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <div style="height: 5px"></div>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="'标注颜色选择'">
              <el-color-picker
                v-model="dict.colour"
                @change="changeColorValue(index)"
              ></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-input
              v-model="dict.colour"
              placeholder="颜色值"
              :disabled="true"
              style="width: 100%"
            />
          </el-col>
          <el-col
            :span="6"
            v-if="
              colorArr.length == getIndex(index) &&
              (dict.id == '' || dict.id == undefined || dict.id == null)
            "
          >
            <el-button @click="delcolorArr(index)" style="margin-left: 10px"
              >删除</el-button
            >
            <el-button
              type="primary"
              style="margin-left: 10px"
              @click="addcolorArr"
              >添加</el-button
            >
          </el-col>
          <el-col
            :span="2"
            v-if="
              colorArr.length != getIndex(index) &&
              (dict.id == '' || dict.id == undefined || dict.id == null)
            "
          >
            <el-button @click="delcolorArr(index)" style="margin-left: 10px"
              >删除</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="submitForm">提 交</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listClassify } from "@/api/system/classify";
import {
  listMarkIntall,
  getMarkIntall,
  delMarkIntall,
  addMarkIntall,
  updateMarkIntall,
} from "@/api/system/tagManage";
import { getToken } from "@/utils/auth";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import department from "@/views/components/department/index.vue";
export default {
  name: "textManage",
  dicts: ["sys_textmanage_type", "sys_manage_diseases"],
  components: { department },
  data() {
    return {
      printDialogVisible: false,
      sysUseTypeArr: [
        { label: "正常", value: "0" },
        { label: "停用", value: "1" },
      ],
      colorArr: [
        {
          featureName: "",
          colour: "",
        },
      ],
      editor: null,
      // 遮罩层
      loading: true,
      printInfo: {},
      // 选中数组
      ids: [],
      diseaseClassifyName: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 专病表格数据
      classifyList: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 是否修改
      inputDisabled: false,
      // 表单参数
      // form: {},
      form: {
        markName: "", //设置名称
        diseaseIds: "", //专病类型
        list: [
          //特征名称、颜色集合
          {
            featureName: "",
            colour: "",
          },
        ],
      },
      detectionType: [], //可选的 检测指标  （接口返回）仅前端用
      sysManageDiseases: [], //专病管理
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        markName: undefined, //标注设置名称
        diseaseIds: undefined, //专病类别
        featureName: undefined, //特征名称
        createBy: undefined, //创建人
      },
      // 表单校验
      rules: {
        markName: [
          {
            required: true,
            message: "标注设置名称不能为空",
            trigger: "blur",
          },
        ],
        diseaseIds: [
          {
            required: true,
            message: "专病必选",
            trigger: "blur",
          },
        ],
        // featureName: [
        //     {
        //         required: true,
        //         message: "特征名称不能为空！",
        //         trigger: "blur",
        //     },
        // ],
        // color: [
        //     {
        //         required: true,
        //         message: "颜色值不能为空！",
        //         trigger: "blur",
        //     },
        // ],
      },
      //是否数组
    };
  },
  watch: {},
  created() {
    this.getList();
    this.loading = false;
    this.getclassList();
  },
  computed: {},
  methods: {
    refreshData(data) {
      this.queryParams.pageNum = 1;
      this.queryParams.hospitalId = data.hospitalId;
      this.queryParams.deptId = data.deptId;
    },
    addcolorArr() {
      let obj = {
        featureName: "",
        colour: "",
      };
      this.colorArr.push(obj);
    },
    delcolorArr(index) {
      if (this.colorArr.length == 1) {
        this.$message.warning("至少保留一个值");
        return;
      }
      this.colorArr.splice(index, 1);
      console.log(this.colorArr);
    },
    getIndex(index) {
      return index + 1;
    },
    changeColorValue(e) {
      console.log(e);
    },

    // 获取专病列表
    getclassList() {
      this.loading = true;
      let params = {
        pageNum: 1,
        pageSize: 9999,
        status: "0",
      };
      listClassify(params).then((response) => {
        this.loading = false;
        this.sysManageDiseases = response.rows;
      });
    },
    changeWang(html) {
      //富文本
      //这里的html是带有标签的
      this.form.content = html;
      // console.log(this.form.content)
    },

    // 真实序号计算（计算分页影响）
    getIndex(index) {
      return (
        (this.queryParams.pageNum - 1) * this.queryParams.pageNum + index + 1
      );
    },
    /** 查询标注设置列表 */
    getList() {
      this.loading = false;
      listMarkIntall(this.queryParams).then((response) => {
        this.classifyList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    // 表单重置
    reset() {
      this.form = {
        markName: "", //文本标题
        diseaseIds: "", //专病类型 （字典管理）
      };
      this.colorArr = [
        {
          featureName: "",
          colour: "",
        },
      ];
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      console.log(this.colorArr);
      this.inputDisabled = false;
      this.open = true;
      this.title = "新增标注设置";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.inputDisabled = true;
      const id = row.id;
      getMarkIntall(id).then((response) => {
        let data = response.data;
        let dataArr = [];
        dataArr[0] = data;
        this.colorArr = dataArr;
        // let diseaseIds = data.diseaseIds.split(",");
        // let disArr = [];
        // diseaseIds.forEach(function (ele) {
        //   disArr.push(Number(ele));
        // });
        // this.form.diseaseIds = disArr;
        this.form.diseaseIds = Number(data.diseaseIds);
        this.form.markName = data.markName;
        this.open = true;
        this.title = "修改标注设置";
      });
    },

    /** 提交按钮 */
    submitForm: function () {
      let paramsArr = [];
      console.log(this.$refs["form"]);
      this.$refs["form"].validate((valid) => {
        let that = this;
        if (valid) {
          console.log(this.form);
          console.log(that.colorArr);
          try {
            that.colorArr.forEach(function (ele) {
              if (
                ele.featureName == null ||
                ele.featureName == undefined ||
                ele.featureName == ""
              ) {
                throw new Error("请输入特征名称");
              }
              if (
                ele.colour == null ||
                ele.colour == undefined ||
                ele.colour == ""
              ) {
                throw new Error("请选择颜色值");
              }
              ele.markName = that.form.markName;
              // ele.diseaseIds = that.form.diseaseIds.join(",");
              ele.diseaseIds = that.form.diseaseIds;
              paramsArr.push(ele);
            });
          } catch (e) {
            this.$message.warning(e.message);
            return;
          }
          // let params={
          //     markName:this.form.markName,
          //      diseaseIds: this.form.diseaseIds.join(',')
          // }
          let params = paramsArr;
          console.log(paramsArr);
          if (params[0].id != undefined) {
            params = params[0];
            updateMarkIntall(params).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            });
          } else {
            addMarkIntall(params).then((response) => {
              if (response.code == 200) {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let that = this;
      const title = row.markName;
      const id = row.id;
      this.$modal
        .confirm('是否确认标注设置名称为"' + title + '"的数据项？')
        .then(function () {
          delMarkIntall(id).then((response) => {
            console.log(response);
            if (response.code == 200) {
              that.$message.success("删除成功");
              that.getList();
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped>
.el-tag {
  margin-right: 15px;
}

::v-deep .el-form-item__content {
  height: 36px;
}
</style>
